<template>
  <PageWrapper dense contentClass="flex">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <PageSearchTableWrappe class="w-3/4 xl:w-4/5">
      <template #search>
        <a-form layout="inline" :model="searchValue">
          <a-form-item>
            <a-input v-model:value="searchValue.username" allowClear placeholder="账号"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="searchValue.realName" allowClear placeholder="姓名"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">查询 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleCreate">新增账号 </a-button>
          </a-form-item>
        </a-form>
      </template>

      <template #table>
        <a-table :columns="columns" :data-source="data" :loading="dataLoading" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确认删除吗?" @confirm="handleDelete(record)">
                <a href="#">删除</a>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
        <Pagination
          v-show="total > 0"
          :total="total"
          v-model:page="searchValue.page"
          v-model:limit="searchValue.limit"
          @pagination="fetchData"
        />
      </template>
    </PageSearchTableWrappe>

    <AccountModal v-model:visible="openModal" :data="modalData" @ok="handleModalOK" />
  </PageWrapper>
</template>
<script lang="ts">
export default {
  name: 'AccountManagement',
};
</script>
<script setup lang="ts">
import { ref, unref, reactive, onMounted, computed, h } from 'vue';
import { getAccountListPage, deleteAccount } from '/@/api/sys/system';
import { PageWrapper, PageSearchTableWrappe } from '/@/components/Page';
import { Pagination } from '/@/components/Pagination';
import DeptTree from './DeptTree.vue';
import { Tag, message } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import AccountModal from './AccountModal.vue';

import { useGo } from '/@/hooks/web/usePage';

const go = useGo();

const columns = [
  {
    title: '账号',
    dataIndex: 'username',
  },
  {
    title: '姓名',
    dataIndex: 'realName',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },

  {
    title: '角色',
    dataIndex: 'roleList',
    customRender: ({ text }) => {
      var roleNames = [];
      text.forEach((role) => {
        roleNames.push(role.name);
      });
      return roleNames.join(' , ');
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '部门',
    dataIndex: 'deptName',
  },
  {
    title: '岗位',
    dataIndex: 'jobName',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '创建人',
    dataIndex: 'creator',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
  },
];

const openModal = ref(false);
const modalData = ref({});
const total = ref(0);
const data = ref([]);

const searchValue = ref({
  page: 1,
  limit: 10,
  username: '',
  realName: '',
  mobile: '',
  deptId: undefined,
});

const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const res = await getAccountListPage(unref(searchValue));
    data.value = res.items;
    total.value = res.records;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  fetchData();
});

const handleSearch = () => {
  searchValue.value.page = 1;
  fetchData();
};

function handleSelect(deptId = '') {
  searchValue.value.deptId = deptId;
  handleSearch();
}

function handleCreate() {
  openModal.value = true;
  modalData.value = {};
}

function handleEdit(record: Recordable) {
  openModal.value = true;
  modalData.value = record;
}

const handleDelete = async (record: Recordable) => {
  const { uid } = record;
  await deleteAccount({ uid: uid });
  message.success('删除成功');
  handleSearch();
};

const handleModalOK = (result) => {
  handleSearch();
};

function handleView(record: Recordable) {
  go('/system/account_detail/' + record.id);
}
</script>
